<template>
	<list-box :name="name" :word="word">
		<scroll-view class="list-scroll" scroll-x="true">
			<view class="list-scroll-view noScorll" v-for="(item,index) in courseData" :key="index">
				<itemTwo :isColums="true" :item="item"></itemTwo>
			</view>
		</scroll-view>
	</list-box>
</template>

<script>
	import listBox from './list-box.vue'
	// 课程
	import  itemTwo from '@/components/common/itemTwo.vue'
	// 导入模拟数据
	import mockCourseData from '@/mock/courseData.js'

	export default {
		components: {
			listBox,
			itemTwo
		},
		props: {
			name: {
				type: String,
				default: "近期上新"
			},
			word: {
				type: String,
				default: "hot"
			},
			courseData: {
				type: Array,
				default: () => mockCourseData
			}
		}
	}
</script>

<style lang="scss">
	.list-scroll {
		// white-space: nowrap;不换行一行显示
		// display: flex;
		white-space: nowrap;
		height: 340rpx;
		.list-scroll-view {
			display: inline-block; //行块布局
			width: 310rpx;
			height:340rpx;
			margin-left: 20rpx;
			// padding: 0 10rpx;
			border-radius: 20rpx;
			box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
			background-color: #fff;
		}
	}
</style>

